2. Rounded corners
Designers seem to love rounded corners (shown in Figure 1), and for years
this was the nightmare of every web developer who needed to lay out a
box with this feature. Table-based layouts for rounded corners are
inappropriate for the mobile web, so we can only rely on CSS
solutions. If a device doesn’t render the style (see Table 2
for a compatibility list), forget about rounded corners for that
device.
Table 2. Rounded corners compatibility table
Browser/platform | Rounded corners
compatibility |
---|
Safari | Yes |
Android
browser | Yes |
Symbian/S60 | Partial |
Nokia Series
40 | No |
webOS | Partial |
BlackBerry | No |
NetFront | No |
Openwave
(Myriad) | No |
Internet
Explorer | No |
Motorola Internet
Browser | No |
Opera
Mobile | No |
Opera
Mini | No |
WebKit has an extension for rounded corners (-webkit-border-radius); Mozilla also has one
(-moz-border-radius), but with very
low compatibility in mobile devices.
Note:
Another solution is the use of canvas for drawing a rounded rectangle.
The -webkit-border-radius
attribute can be defined as one value (like 5px or 10%), two values (top-bottom and
left-right), or four values giving the radius of each corner
separately. These are samples of different styles:
.rounded {
-webkit-border-radius: 10px;
}
.rounded2 {
-webkit-border-radius: 10px 20px;
}
.rounded3 {
-webkit-border-radius: 3em 2em 3em 2em;
}